<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>微站</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="../../js/template-web.js"></script>
    <script src="/lobsteruiframe/weui/js/zepto.min.js"></script>
    <script src="/jslib/lobster.js"></script>
    <script src="js/config.js"></script>
    <style>
        body {
            background-color: #fafafa;
            max-height: 999999px;
            margin: 0 auto !important;
            padding: 0 !important;
        }

        body,
        html,
        img {
            color: #333;
            font-size: 100%;
            max-height: 999999px;
            margin: 0 auto;
            padding: 0;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .bd_blue {
            background-color: #338ed7
        }

        .bd_green {
            background-color: #81c868;
        }

        .bd_green_blue {
            background-color: #42d6ca;
        }

        .fz-14 {
            font-size: 14px;
        }

        .fz-12 {
            font-size: 12px;
        }

        .fz-10 {
            font-size: 10px;
        }

        .shodow_right {
            width: 0;
            height: 0;
            border-bottom: 10px solid transparent;
            border-top: 10px solid transparent;
            border-left: 12px #338ed7 solid;
            position: absolute;
            right: -12px;
            top: 20px;
        }

        .shadow_green {
            border-left: 12px #81c868 solid;
        }

        .shodow_left {
            width: 0;
            height: 0;
            border-bottom: 10px solid transparent;
            border-top: 10px solid transparent;
            border-right: 12px #f6cd37 solid;
            position: absolute;
            left: -12px;
            top: 10px;
        }

        .shadow_green_blue {
            border-right: 12px #42d6ca solid;
            top: 20px;
        }

        .shodow_top {
            width: 0;
            height: 0;
            border-bottom: 12px solid #f5a625;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            position: absolute;
            left: 10px;
            bottom: 40px;
        }

        .shodow_down {
            width: 0;
            height: 0;
            border-top: 12px solid #f5a625;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            position: absolute;
            left: 10px;
            top: 40px;
        }

        .main_body {
            max-width: 768px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
        }

        .company_name {
            width: 100%;
            background-color: #49acff;
            padding: 30px 0;
            color: #fff;
        }

        .cn_title {
            margin: 10px 20px;
            text-align: center;
            letter-spacing: 2px;
        }

        .cn_place {
            display: flex;
            justify-content: center;
            font-size: 12px;
            line-height: 20px;
            margin: 10px 20px;
        }

        .cn_place img {
            width: 16px;
            height: 16px;
            margin: 2px 0;
            margin-right: 10px;
        }

        .company_info {
            width: 100%;
            display: flex;
        }

        .ci_left {
            width: 40%;
            color: #fff;
            font-size: 12px;
            text-align: right;
            padding-top: 15px;
            position: relative;
        }


        .cil_text {
            margin: 5px 10px;
        }

        .ci_right {
            flex: 1;
            overflow: hidden;
            font-size: 0;
        }

        .ci_right img {
            width: 100%;
        }

        .company_others {
            width: 100%;
            display: flex;
        }

        .co_left {
            width: 40%;
        }

        .co_left img {
            width: 100%;
            height: 100%;
        }

        .co_center {
            width: 25%;
            position: relative;
            background-color: #f6cd37;
            color: #fff;
            padding-top: 5px;
        }

        .coc_text {
            margin: 5px 8px;
        }

        .co_right {
            width: 35%;
            position: relative;
        }

        .co_right img {
            width: 100%;
        }

        .cor_text {
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 0;
            background-color: #f5a625;
            color: #fff;
        }

        .cor_top {
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background-color: #f5a625;
            color: #fff;
        }

        .cort_text {
            margin: 3px 8px;
        }

        .cil_text01 {
            text-align: left;
        }

        @@media(max-width:320px) {
            .cort_text {
                margin: 0px 3px;
            }

            .shodow_top {
                bottom: 29px;
            }
        }

        a:hover {
            color: #fff
        }

        a {
            text-decoration: none;
        }

        .clo-xs1 {
            width: 8.33333333%;
        }

        .clo-xs2 {
            width: 16.66666667%;
        }

        .clo-xs3 {
            width: 25%
        }

        .clo-xs4 {
            width: 33.33333333%;
        }

        .clo-xs5 {
            width: 41.66666667%;
        }

        .clo-xs6 {
            width: 50%;
        }

        .clo-xs7 {
            width: 58.33333333%;
        }

        .clo-xs8 {
            width: 66.66666667%;
        }

        .clo-xs9 {
            width: 75%;
        }

        .clo-xs10 {
            width: 83.33333333%;
        }

        .clo-xs11 {
            width: 91.66666667%;
        }

        .clo-xs12 {
            width: 100%;
        }

        .row1 {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .row2 {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

        .row4 {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
        }
    </style>
</head>

<body>
    <div class="main_body">

    </div>
</body>
<script type="text/template" id="indexTemplate2">
    {{if(list.length==0)}}
    <div style="left: 50%;
    transform: translate(-50%,-50%);
    position: fixed;
    top: 50%;font-size:16px;">无数据，请先去后台配置</div>
    {{else}}
    {{each list }} 
    {{if ($value.Layout==0) }} 
        <div class="company_name clo-xs{{$value.TotalWidth}}" style="background-color:{{$value.TextBackgroundColor}}" data-obj="{{$value}}" >
            <div class="cn_title row1">
                {{$value.Title}}
            </div>
            <div class="cn_place row4">
                <img src="{{$value.BackImage}}" />{{$value.Desc}}
            </div>
        </div> 
   {{else if($value.Layout==1) }} 
        <div class="company_info clo-xs{{$value.TotalWidth}}" data-obj="{{$value}}"> 
            <div class="ci_left clo-xs{{$value.TextWidth}}" style="background-color:{{$value.TextBackgroundColor}}">
                <div class="cil_text fz-14 row1 ">
                    {{$value.Title}}
                </div>
                <!-- <div class="cil_text .row2">
                    {{$value.Desc}}
                </div> -->
                <div class="cil_text fz-12 row2">
                    {{$value.Title_en}}
                </div>
                <div class="shodow_right " style="border-left: 12px {{$value.TextBackgroundColor}} solid;"></div>
            </div>

            <div class="ci_right">
                <img src="{{$value.BackImage}}" /> 
            </div>
        </div> 
    {{else if($value.Layout==2)}} 
        <div class="company_info clo-xs{{$value.TotalWidth}}" data-obj="{{$value}}" >
            <div class="ci_right" >
                <img src="{{$value.BackImage}}" /> 
            </div>
            <div class="ci_left  clo-xs{{$value.TextWidth}}" style="background-color:{{$value.TextBackgroundColor}}">
                <div class="cil_text cil_text01 fz-14 row1">
                    {{$value.Title}}
                </div>
                <!-- <div class="cil_text cil_text01">
                    {{$value.Desc}}
                </div> -->
                <div class="cil_text cil_text01 fz-12 row2">
                    {{$value.Title_en}}
                </div>
                <div class="shodow_left" style="border-right: 12px {{$value.TextBackgroundColor}} solid;"></div>
            </div>
        </div> 
    {{else if($value.Layout==3)}} 
        <div class="company_info clo-xs{{$value.TotalWidth}}" style="position: relative;" data-obj="{{$value}}">
            <div class="ci_right">
                <img src="{{$value.BackImage}}" />  
            </div> 
            <div class="cor_text" style="background-color:{{$value.TextBackgroundColor}}">
                <div class="cort_text fz-12 row1">
                    {{$value.Title}}
                </div>
                <!-- <div class="cort_text fz-10">
                    {{$value.Desc}}
                </div> -->
                <div class="cil_text fz-12 row1">
                    {{$value.Title_en}}
                </div>
            </div>
            <div class="shodow_top" style="border-bottom: 12px {{$value.TextBackgroundColor}} solid;"></div>
        </div> 
    {{else if($value.Layout==4)}} 
    <div class="company_info clo-xs{{$value.TotalWidth}}" style="position: relative;" data-obj="{{$value}}">
        <div class="ci_right">
            <img src="{{$value.BackImage}}" />  
        </div> 
        <div class="cor_top" style="background-color:{{$value.TextBackgroundColor}}">
            <div class="cort_text fz-12 row1">
                {{$value.Title}}
            </div>
            <!-- <div class="cort_text fz-10">
                {{$value.Desc}}
            </div> -->
            <div class="cil_text fz-12 row1">
                {{$value.Title_en}}
            </div>
        </div>
        <div class="shodow_down" style="border-top: 12px {{$value.TextBackgroundColor}} solid;"></div>
    </div> 
    {{/if}}
    {{/each}}
    {{/if}}
</script>

<script>
    var controller = {
        data: {
            workId:0,
            websiteid:0
        },
        //初始化页面
        initpage: function () {
            this.initevent();
            this.data.workId = lobsterh5.GetUrlParam("workId") || 2049;
            this.data.websiteid = lobsterh5.GetUrlParam("websiteId") || 1019;
            this.getIndexData(); 
        },
        //初始化事件
        initevent: function () {
            var self=this;
            $(".main_body").on("click", ".company_info,.company_name", function () {
                var data = $(this).data().obj;
                if (data.UrlType == 1) {
                    location.href = "list.html?appid="+lobsterh5.GetAppId()+"&workId="+self.data.workId+"&websiteId="+self.data.websiteid+"&nodeid=" + data.UrlParamValue;
                } else if (data.UrlType == 2) {
                    location.href = "detail.html?appid="+lobsterh5.GetAppId()+"&workId="+self.data.workId+"&websiteId="+self.data.websiteid+"&id=" + data.UrlParamValue;
                } else if (data.UrlType == 3) {
                    location.href = data.Url;
                }
                console.log($(this).data());
                console.log(1);
            })
        },
        getIndexData: function () {
            var self = this;
            lobsterh5.GETAPI("tsFrontShow.getindexdata2",{websiteid:self.data.websiteid,workId:self.data.workId}).then(res => {
                var html = template('indexTemplate2', { list: res.data })
                $(".main_body").html(html);
            })
        }
    }
    $(function () {
        controller.initpage();
    })
</script>

</html>